<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>mydemo</title>
  <style type="text/css">
    body,
    ul,
    li,
    a,
    p {
      margin: 0;
      padding: 0;
    }

    li {
      list-style-type: none;
    }

    li a {
      text-decoration: none;
    }

    p {
      display: none;
    }

    /* 外层盒子样式 */
    #outer {
      width: 500px;
      margin: 10px auto;
    }

    /* 列表样式 */
    #month {
      width: 400px;
      margin: 0 auto;
      background: #d6cdcd;
      padding: 0 0 10px 10px;
      overflow: hidden;
      zoom: 1;
      text-align: center;
    }

    /* li标签样式 */
    #month li {
      width: 68px;
      height: 68px;
      border: 1px solid black;
      margin: 10px 10px 0 0;
      float: left;
      padding: 10px;
      font-size: 25px;
      font-weight: 800;
      color: white;
      background: black;
      cursor: pointer;
    }

    #month li span {
      display: block;
    }

    #month li.liCurrent {
      color: red;
      background: white;
    }

    /* 下层盒子样式 */
    #bottom {
      width: 390px;
      margin: 0 auto;
      border: 10px solid #d6cdcd;
      border-top: 0;
      font-size: 25px;
    }

    #bottom p span {
      font-weight: 800;
    }

    .pCurrent {
      display: block;
      border: 1px solid white;
      background: #867676;
    }
  </style>


</head>

<body>
  <div id="outer">
    <ul id="month">
      <li><span>1</span>JAN</li>
      <li><span>2</span>FER</li>
      <li><span>3</span>MAR</li>
      <li><span>4</span>APR</li>
      <li><span>5</span>MAY</li>
      <li class="liCurrent"><span>6</span>JUN</li>
      <li><span>7</span>JUL</li>
      <li><span>8</span>AUG</li>
      <li><span>9</span>SEP</li>
      <li><span>10</span>OCT</li>
      <li><span>11</span>NOV</li>
      <li><span>12</span>DEC</li>
    </ul>
    <div id="bottom">
      <p><span>1月节日</span>元旦：1月1日至3日放假三天</p>
      <p><span>2月节日</span>2月2日至8日放假7天。</p>
      <p><span>3月节日</span>妇女节：3月8日妇女节，与我无关。</p>
      <p><span>4月节日</span>清明节：4月3日至5日放假3天</p>
      <p><span>5月节日</span>劳动节：4月30日至5月2日放假3天。</p>
      <p class="pCurrent"><span>6月节日</span>端午节：6月4日至6日放假3天。</p>
      <p><span>7月节日</span>小暑：7月7日小暑。不放假。</p>
      <p><span>8月节日</span>七夕节：8月6日七夕节。不放假。</p>
      <p><span>9月节日</span>中秋节：9月10日至12日放假3天。</p>
      <p><span>10月节日</span>国庆节：10月1日至7日放假7天。</p>
      <p><span>11月节日</span>立冬：11月8日立冬。不放假</p>
      <p><span>12月节日</span>艾滋病日:12月1日<br />废除奴隶制国际日:12月2日。</p>
    </div>
  </div>
</body>
<script>
  const month = document.querySelectorAll('#month li')
  const tips = document.querySelectorAll('#bottom p')
  month.forEach((item,index)=>[
    item.onmouseenter = function (){
      tips.forEach(it=>{
        it.className = ''
      })
      month.forEach(i=>{
        i.className = ''
      })
      tips[index].className = 'pCurrent'
      item.className = 'liCurrent'
    }
  ])



</script>
</html>